<template>
  <el-card id="todoCard" class="todo-card">
    <div slot="header" class="todo-card-title">
      <svg-icon icon-class="todo" class-name="icon"></svg-icon>
      <span>我的待办</span>
    </div>
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="流水号" prop="flowSn">
        <el-input
          v-model="queryParams.flowSn"
          placeholder="请输入流水号"
          clearable
          size="small"
          style="width: 200px"
          @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="标题" prop="title">
        <el-input
          v-model="queryParams.title"
          placeholder="请输入标题"
          clearable
          size="small"
          style="width: 200px"
          @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="发起人" prop="beginUserName">
        <el-input
          v-model="queryParams.beginUserName"
          placeholder="请输入发起人"
          clearable
          size="small"
          style="width: 200px"
          @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="initData"></right-toolbar>
    </el-row>

    <el-table v-loading="table.loading" :data="table.data" :height="tableHeight">
      <el-table-column label="流水号" align="center" prop="flowSn" width="180"/>
      <el-table-column label="标题" align="center" prop="title" :show-overflow-tooltip="true" min-width="200"/>
      <el-table-column label="发起人" align="center" prop="beginUserName" width="160"/>
      <el-table-column label="发起时间" align="center" prop="beginTime" width="200"/>
      <el-table-column label="接收时间" align="center" prop="receiveTime" width="200"/>
      <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width" width="120">
        <template slot-scope="scope">
          <el-link
            type="primary"
            icon="el-icon-edit"
            :underline="false"
            @click="handleApprove(scope.row)">
            审批
          </el-link>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="page.total > 0"
      :total="page.total"
      :page.sync="page.current"
      :limit.sync="page.size"
      @pagination="initData"/>

    <approve-dialog ref="approveDialog" @success="handleQuery"></approve-dialog>
  </el-card>
</template>

<script>
import { myFlowList } from "@/api/flow/flow";
import { on, off } from "@/utils";

import ApproveDialog from "@/views/flow/approveDialog";

export default {
  name: "Index",
  components: {
    ApproveDialog
  },
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
      // 查询参数
      queryParams: {
        flowSn: undefined,
        title: undefined,
        beginUserName: undefined
      },
      table: {
        data: [],
        loading: false,
      },
      page: {
        total: 0,
        current: 1,
        size: 10,
      },
      tableHeight: undefined
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.initData();
      this.getTableHeight();
    },
    /** 查询字典类型列表 */
    initData() {
      this.table.loading = true;
      myFlowList({
        flowSn: this.queryParams.flowSn,
        title: this.queryParams.title,
        beginUserName: this.queryParams.beginUserName,
        page: true,
        current: this.page.current,
        size: this.page.size
      }).then(response => {
        this.table.data = response.records;
        this.page.total = response.total;
        this.table.loading = false;
      }).catch(() => {
        this.table.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.page.current = 1;
      this.initData();
    },
    handleApprove(row) {
      this.$refs.approveDialog.init(row.id, row.orders);
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    getTableHeight() {
      this.$nextTick(() => {
        // 总高度
        const todoCard = document.getElementById("todoCard");
        const cardHeight = todoCard.clientHeight;
        // 标题高度
        const title = todoCard.getElementsByClassName("el-card__header")[0];
        const titleHeight = title.offsetHeight;

        const body = todoCard.getElementsByClassName("el-card__body")[0];
        // 条件高度
        const form = body.getElementsByClassName("el-form")[0];
        const formHeight = form.offsetHeight;
        // 工具栏高度
        const mb8 = body.getElementsByClassName("mb8")[0];
        const mb8Height = mb8.offsetHeight;
        this.tableHeight = cardHeight - titleHeight - formHeight - mb8Height - 100;
      });
    }
  },
  mounted() {
    on(window, 'resize', this.getTableHeight);
  },
  beforeDestroy() {
    off(window, 'resize', this.getTableHeight);
  }
}
</script>

<style scoped lang="scss">
.todo-card {
  margin: 16px;
  height: calc(100% - 32px);

  .todo-card-title {
    display: flex;
    flex-direction: row;
    align-items: center;

    .icon {
      margin-right: 6px;
      color: red;
    }
  }
}
</style>
